.amplify-ai-conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;

  &__suggestion {
  }

  &__message {
    // internal CSS vars to handle combination of variation and sender (user, ai)
    --internal-content-bg: ;
    --internal-flex-direction: ;
    --internal-content-padding: ;
    --internal-body-align-items: ;

    display: flex;
    flex-direction: var(--internal-flex-direction);
    gap: var(--amplify-components-ai-conversation-message-gap);
    padding-inline: var(
      --amplify-components-ai-conversation-message-padding-inline
    );
    padding-block: var(
      --amplify-components-ai-conversation-message-padding-block
    );

    &__list {
      display: flex;
      flex-direction: column;
    }

    &__avatar {
      flex-shrink: 0;
    }

    &__sender {
      display: flex;
      flex-direction: var(--internal-flex-direction);
      align-items: center;
      min-height: var(--amplify-components-avatar-height);
      gap: var(--amplify-components-ai-conversation-message-sender-gap);

      &__username {
        color: var(
          --amplify-components-ai-conversation-message-sender-username-color
        );
        font-size: var(
          --amplify-components-ai-conversation-message-sender-username-font-size
        );
        font-weight: var(
          --amplify-components-ai-conversation-message-sender-username-font-weight
        );
      }

      &__timestamp {
        color: var(
          --amplify-components-ai-conversation-message-sender-timestamp-color
        );
        font-size: var(
          --amplify-components-ai-conversation-message-sender-timestamp-font-size
        );
        font-weight: var(
          --amplify-components-ai-conversation-message-sender-timestamp-font-weight
        );
      }
    }

    &__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: var(--internal-body-align-items);
      gap: var(--amplify-components-ai-conversation-message-body-gap);
    }

    &__content {
      background-color: var(--internal-content-bg);
      border-radius: var(--amplify-radii-medium);
      padding: var(--internal-content-padding);
      display: flex;
      flex-direction: column;
      gap: var(--amplify-space-small);
    }

    &__text {
      display: block;
    }

    &__image {
      max-width: 25%;
    }

    &__actions {
      display: flex;
      flex-direction: row;
      gap: var(--amplify-components-ai-conversation-message-actions-gap);
    }

    &--bubble {
      --internal-content-bg: var(--internal-bg-color);
      --internal-content-padding: var(--amplify-space-xxs)
        var(--amplify-space-xs);
      --internal-flex-direction: row-reverse;
      --internal-body-align-items: flex-end;
    }

    &--filled {
    }

    &--user {
      --internal-bg-color: var(
        --amplify-components-ai-conversation-message-user-background-color
      );
    }

    &--assistant {
      --internal-bg-color: var(
        --amplify-components-ai-conversation-message-assistant-background-color
      );
      --internal-flex-direction: row;
      --internal-body-align-items: flex-start;
    }
  }

  &__scrollview {
    // Because the textarea input can grow in height
    // we don't want the scrollview which contains the messages
    // to go to zero height, so setting the flex-basis to 50%
    flex: 1 0 50%;
  }

  &__form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--amplify-components-ai-conversation-form-padding);
    gap: var(--amplify-components-ai-conversation-form-gap);
    // To ensure auto-resize textarea doesn't grow too big for its container
    max-height: 100%;
    overflow: hidden;

    &__dropzone {
      text-align: initial;
      border: none;
      padding: 0;
      // To ensure auto-resize textarea doesn't grow too big for its container
      display: grid;
      overflow: hidden;
    }

    &__error {
      padding: 0;
      padding-block-start: var(
        --amplify-components-ai-conversation-attachment-list-padding-block-start
      );
      gap: var(--amplify-components-ai-conversation-attachment-gap);
    }

    &__attach {
    }
    &__send {
    }
    &__field {
    }
  }

  &__attachment {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block: var(
      --amplify-components-ai-conversation-attachment-padding-block
    );
    padding-inline: var(
      --amplify-components-ai-conversation-attachment-padding-inline
    );
    border-width: var(
      --amplify-components-ai-conversation-attachment-border-width
    );
    border-style: solid;
    border-color: var(
      --amplify-components-ai-conversation-attachment-border-color
    );
    border-radius: var(
      --amplify-components-ai-conversation-attachment-border-radius
    );
    gap: var(--amplify-components-ai-conversation-attachment-gap);
    font-size: var(--amplify-components-ai-conversation-attachment-font-size);

    &__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--amplify-components-ai-conversation-attachment-list-gap);
      padding: var(
        --amplify-components-ai-conversation-attachment-list-padding
      );
      padding-block-start: var(
        --amplify-components-ai-conversation-attachment-list-padding-block-start
      );
    }

    &__image {
      width: var(--amplify-components-ai-conversation-attachment-image-width);
      height: var(--amplify-components-ai-conversation-attachment-image-height);
      object-fit: cover;
    }

    &__name {
      color: var(--amplify-components-ai-conversation-attachment-name-color);
      font-size: var(
        --amplify-components-ai-conversation-attachment-name-font-size
      );
      font-weight: var(
        --amplify-components-ai-conversation-attachment-name-font-weight
      );
    }

    &__size {
      color: var(--amplify-components-ai-conversation-attachment-size-color);
      font-size: var(
        --amplify-components-ai-conversation-attachment-size-font-size
      );
      font-weight: var(
        --amplify-components-ai-conversation-attachment-size-font-weight
      );
    }

    &__remove {
      padding: var(
        --amplify-components-ai-conversation-attachment-remove-padding
      );
    }
  }

  &__prompt {
    font-weight: normal;
  }
}
